import React, { useState } from 'react';
import { Form, Input, Button, Select, Card, Divider, Typography, Spin, Alert, message, Space } from 'antd';
import axios from 'axios';

const { TextArea } = Input;
const { Title, Paragraph } = Typography;
const { Option } = Select;

interface ContentFormValues {
  topic: string;
  keywords: string;
  platforms: string[];
  tone: string;
}

interface GeneratedContent {
  platform: string;
  content: string;
}

const ContentGenerator = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [contents, setContents] = useState<GeneratedContent[]>([]);

  const handleSubmit = async (values: ContentFormValues) => {
    try {
      setLoading(true);
      const response = await axios.post('/api/generate-copy', {
        topic: values.topic,
        keywords: values.keywords.split(',').map(k => k.trim()),
        platforms: values.platforms,
        tone: values.tone
      });
      
      setContents(response.data.contents);
      message.success('文案生成成功！');
    } catch (error) {
      console.error('Error generating content:', error);
      message.error('文案生成失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <Title level={2}>智能文案生成</Title>
      <Divider />
      
      <Form 
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        initialValues={{
          platforms: ['weibo', 'xiaohongshu'],
          tone: 'professional'
        }}
      >
        <Form.Item
          name="topic"
          label="主题"
          rules={[{ required: true, message: '请输入文案主题' }]}
        >
          <Input placeholder="例如：新品发布、促销活动、行业新闻等" />
        </Form.Item>
        
        <Form.Item
          name="keywords"
          label="关键词"
          rules={[{ required: true, message: '请输入关键词' }]}
        >
          <Input placeholder="输入关键词，用逗号分隔" />
        </Form.Item>
        
        <Form.Item
          name="platforms"
          label="目标平台"
          rules={[{ required: true, message: '请选择至少一个平台' }]}
        >
          <Select mode="multiple" placeholder="选择要发布的平台">
            <Option value="weibo">微博</Option>
            <Option value="xiaohongshu">小红书</Option>
            <Option value="wechat">微信公众号</Option>
            <Option value="douyin">抖音</Option>
          </Select>
        </Form.Item>
        
        <Form.Item name="tone" label="文案风格">
          <Select>
            <Option value="professional">专业正式</Option>
            <Option value="casual">轻松随意</Option>
            <Option value="humorous">幽默风趣</Option>
            <Option value="emotional">情感共鸣</Option>
          </Select>
        </Form.Item>
        
        <Form.Item>
          <Button type="primary" htmlType="submit" loading={loading}>
            生成文案
          </Button>
        </Form.Item>
      </Form>
      
      <Divider />
      
      {loading ? (
        <div style={{ textAlign: 'center', padding: '30px' }}>
          <Spin size="large" />
          <Paragraph style={{ marginTop: '10px' }}>正在生成文案...</Paragraph>
        </div>
      ) : (
        contents.length > 0 && (
          <div>
            <Title level={3}>生成结果</Title>
            <Space direction="vertical" style={{ width: '100%' }}>
              {contents.map((item, index) => (
                <Card
                  key={index}
                  title={(() => {
                    switch(item.platform) {
                      case 'weibo': return '微博';
                      case 'xiaohongshu': return '小红书';
                      case 'wechat': return '微信公众号';
                      case 'douyin': return '抖音';
                      default: return item.platform;
                    }
                  })()}
                  extra={<Button type="link">复制</Button>}
                >
                  <Paragraph>{item.content}</Paragraph>
                </Card>
              ))}
            </Space>
          </div>
        )
      )}
    </div>
  );
};

export default ContentGenerator; 